* {
  margin: 0;
  padding: 0;
}
body {
  background: #333;
}
.main {
  width: 100px;
  height: 100px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-30deg) skew(25deg);
  /* background: gray; */
}
.main span {
  width: 100%;
  height: 100%;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 80px;
  color: #1e90ff;
  border-radius: 10%;
  border: 1px solid #1e90ff;
  transition: 0.5s linear;
}
.main:hover span {
  transform: translate(calc(var(--s) * 10%), calc(-1 * var(--s) * 10%));
  opacity: calc(0.2 * var(--s));
  background: #1e90ff;
  color: white;
  text-shadow: 0 0 10px white;
}
